<template>
  <!-- 显示文字和图片 -->
  <div class="ShowListComponent" v-if="contentFlag == '1'">
    <!-- 左边文字部分 -->
    <div>
      <!-- 文字描述部分 -->
      <div>

      </div>
      <!-- /文字描述部分 -->

      <!-- 作者信息部分 -->
      <div>
        <!-- 作者头像 -->
        <div></div>
        <!-- 作者头像 -->

        <!-- 作者称呼 -->
        <div></div>
        <!-- 作者称呼 -->

        <!-- 创作日期 -->
        <div></div>
        <!-- 创作日期 -->
      </div>
      <!-- 作者信息部分 -->
    </div>
    <!-- 右边图片部分 -->
    <div>
      <img :src=imgaddr>
    </div>
  </div>
  <!-- /显示文字和图片 -->

  <!-- 只显示文字 -->
  <div class="ShowListComponent" v-else-if="contentFlags == '2'">
    <!-- 文字描述部分 -->
    <div>
      
    </div>
    <!-- 文字描述部分 -->

    <!-- 用户信息部分 -->
    <div>

    </div>
    <!-- 用户信息部分 -->
  </div>
  <!-- /只显示文字 -->

  <!-- 显示多张图片 -->
  <div class="ShowListComponent" v-else-if="contentFlags == '3'">
    <!-- 左边文字部分 -->
    <div>{{ descript }}</div>
    <!-- 右边图片部分 -->
    <div>
      <img :src=imgaddr>
    </div>
  </div>
  <!-- /显示多张图片 -->

</template>

<script lang="ts">
import { defineComponent,ref } from 'vue';
export default defineComponent({
  name: 'ShowListComponent',
  props:{
    // 信息描述
    descript:{
      type: String,
      required : true,
    },
    
    // 图片地址
    imgaddr: {
      type : String, 
    },

    // 作者头像
    authorAvatar: {
      type: String,
      rquired: true
    },
    
    // 作者名称
    authorAppellation: {
      type: String,
      required: true
    },

    // 发表日期
    publishedDate: {
      type: String,
      required: true
    },

    // 列表样式风格控制位
    contentFlags: {
      type : String,
      required : true,
    }
  },
  components: {
    
  },

  setup() {
    
  },
})
</script>

<style scoped>
.ShowListComponent {
  width: 100%;
  height: 50px;
  font-size: 14px;
}
</style>
